<script setup lang="ts">
import {type Component, h, PropType, reactive, ref, type ShallowRef, shallowRef} from 'vue'
import { ElIcon } from 'element-plus'
import { Position, MapLocation, LocationInformation, Promotion, Bicycle } from '@element-plus/icons-vue'
import { gpsbus } from '@/utils/gps/event'
import { createPopup } from '@/utils/gps/createPopup'
import CdlMap from '@/components/map'
import Information from '@/components/information/index.vue'
import AddOrUpdate from '@/components/deviceInformation/index.vue'
import { useDeviceAndStatusApi } from '@/api/gps/device'
import "@/styles/menu.css"

const props = defineProps({
  imei: {
    type: String,
  },
  menuGroups: {
    type: Array as PropType<ItemName[]>,
    required: true
  }
})

export type ItemName = "trajectory" | "tracking" | "deviceInfo" | "instructions" | "accountInfo" | "select" | "selectDeep"
type Menu = {
  [key in ItemName]: {
    label: string,
    icon: ShallowRef<Component>,
    handler: (...args: any) => void,
  }
}
const trackingRef = ref()
const deviceInfo = ref()

props.imei && getDeviceInfo()

/**
 * 获取基本信息
 */
function getDeviceInfo() {
  useDeviceAndStatusApi(props.imei!).then(res =>{
    deviceInfo.value = res.data
  })
}

const menuConfig = reactive<Menu>({
  trajectory: {
    label: "轨迹",
    icon: shallowRef(LocationInformation),
    handler: jumpTrack
  },
  tracking: {
    label: "跟踪",
    icon: shallowRef(MapLocation),
    handler: openTracking
  },
  deviceInfo: {
    label: "设备信息",
    icon: shallowRef(Bicycle),
    handler: openVehicleInfo
  },
  instructions: {
    label: "发送指令",
    icon: shallowRef(Promotion),
    handler: ()=> {}
  },
  accountInfo: {
    label: "账号信息",
    icon: shallowRef(MapLocation),
    handler: ()=> {}
  },
  select: {
    label: "选中所有设备",
    icon: shallowRef(MapLocation),
    handler: selectAll
  },
  selectDeep: {
    label: "选中所有设备(含子级)",
    icon: shallowRef(MapLocation),
    handler: selectAllDeep
  }
})

/**
 * 选中全部
 */
function selectAll(){

}

/**
 * 选中全部（含子级）
 */
function selectAllDeep(){

}

/**
 * 轨迹
 */
function jumpTrack() {
  gpsbus.emit('switchMenu', 'track')
  gpsbus.emit('trackListInit', props.imei)
}

/**
 * 追踪
 */
function openTracking(){
  createPopup({
    default: ()=> h(CdlMap, {
      ref: trackingRef,
      realTimeLocation: true,
      control: "track",
      // enclosure: true
    })
  }, {
    width: 400,
    height: 450,
    mask: false,
    drag: true
  })

  trackingRef.value.initData({
    imei: props.imei,
    initialVehiclePosition: {
      latitude: deviceInfo.value.latitude,
      longitude: deviceInfo.value.longitude,
      direction: deviceInfo.value.direction
    }
  })
}
/**
 * 车辆信息
 */
function openVehicleInfo() {
  if(!props.imei){
    return
  }
  createPopup(
    {
      default: (close) =>
        h(AddOrUpdate, {
          imei: props.imei!,
          name: '车辆信息',
          onClose: close
        })
    },
    {
      title: '车辆信息'
    }
  )
}
</script>

<template>
  <div id="right_click_menu">
    <ul>
      <li v-for="item in menuGroups" :key="item" @click="menuConfig[item].handler">
        <ElIcon><component :is="menuConfig[item].icon"></component></ElIcon><span>{{menuConfig[item].label}}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
#right_click_menu {
  position: absolute;
  top: 300px;
  left: 20px;
  background-color: white;
  z-index: 100;
  box-shadow:
      0 12px 32px 4px rgba(0, 0, 0, 0.04),
      0 8px 20px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px 0;
  min-width: 120px;
}
li {
  list-style: none;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
li span {
  color: #0a0a0a;
}
li i {
  margin-right: 8px;
  transform: translateY(2px);
}
li:hover {
  background-color: rgb(206, 228, 225);
  color: #006fff;
}
li img{
  height: 16px;
  width: 16px;
  margin-right: 8px;
}
</style>